<!-- 1.模版(html代码) -->
<template>
    <div>
        <h3 class="title">{{message}}--------{{num}}</h3>
        <button @click="btn">点击切换展示内容</button>
        <p>234356776789878687</p>
        <my-header></my-header>
    </div>
</template>
<!-- 2.js代码 -->
<script>
// 3.引入组件
import myheader from "./Header.vue";


export default {
    data(){
        return {
            message:"hello world",
            num:100
        }
        
    },
    methods:{
        btn(){
            this.message=6666;
        }
    },
    //4.注册组件 
    components:{
        "my-header":myheader
    }
}

</script>
<!-- 3.css代码 -->
<style>
.title{
    color: yellow;
    background-color: green;
}


</style>